<template>
  <div>
    <el-dialog title="编辑" :visible.sync="showFlag" :center="true">
      <el-form ref="form" :model="formData" :rules="rules">
        <el-form-item label="昵称" prop="name" label-width="120px">
          <el-input v-model="formData.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="username" label-width="120px">
          <el-input v-model="formData.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" label-width="120px">
          <el-input v-model="formData.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" label-width="120px">
          <el-input v-model="formData.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="phone" label-width="120px">
          <el-input v-model="formData.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="vip等级" prop="grade" label-width="120px">
          <el-select v-model="formData.grade" placeholder="请选择等级">
            <el-option v-for="(item, index) in gradeList" :label="item.name" :value="item.value"
                       :key="index"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日" prop="birthday" label-width="120px">
          <el-date-picker
            v-model="formData.birthday"
            type="datetime"
            placeholder="请选择生日">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="禁用" prop="disableFlag" label-width="120px">
          <el-switch v-model="formData.disableFlag"></el-switch>
        </el-form-item>
        <el-form-item label="年龄" prop="age" label-width="120px">
          <el-input v-model="formData.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身高" prop="stature" label-width="120px">
          <el-input v-model="formData.stature" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <!--  底部按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeForm">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {getApi, saveApi} from '@/api/sys/user'
  import {
    elementVerifyEmail,
    elementVerifyPhone,
    elementVerifyPositiveDecimal,
    elementVerifyPositiveInteger
  } from '@/util/elementVerifyUtil'
  import messageUtil from "@/util/messageUtil"

  export default {
    name: "edit",
    props: {
      // 是否显示
      showFlag: {
        type: Boolean,
        default: false
      },
      id: {
        type: Number,
        default: null
      }
    },

    data() {
      return {
        // 表单数据
        formData: {
          // 昵称
          name: null,
          // 账号
          username: null,
          // 密码
          password: null,
          // 邮箱
          email: null,
          // 手机
          phone: null,
          // 身高
          stature: null,
          // 年龄
          age: null,
          // 生日
          birthday: null,
          // 启动标志
          disableFlag: false,
          // 等级
          grade: null
        },
        // 校验规则
        rules: {
          name: [{required: true, message: '请输入昵称', trigger: 'blur'}],
          username: [{required: true, message: '请输入账号', trigger: 'change'}],
          password: [{required: true, message: '请输入密码', trigger: 'change'}],
          email: [{
            required: true, validator: (rule, value, callback) => {
              elementVerifyEmail(rule, value, callback, "邮箱")
            }, trigger: 'change'
          }],
          phone: [{
            required: true, validator: (rule, value, callback) => {
              elementVerifyPhone(rule, value, callback, "手机")
            }, trigger: 'change'
          }],
          stature: [{
            required: true, validator: (rule, value, callback) => {
              elementVerifyPositiveDecimal(rule, value, callback, "身高", 300)
            }, trigger: 'change'
          }],
          age: [{
            required: true, validator: (rule, value, callback) => {
              elementVerifyPositiveInteger(rule, value, callback, "年龄", 150)
            }, trigger: 'change'
          }],
          birthday: [{type: 'date', required: true, message: '请选择生日', trigger: 'change'}],
          disableFlag: [{required: true, message: '请选择禁用', trigger: 'change'}],
          grade: [{required: true, message: '请选择等级', trigger: 'change'}]
        },
        // 等级集合
        gradeList: [
          {name: '等级1', value: 'vip1'},
          {name: '等级2', value: 'vip2'},
          {name: '等级3', value: 'vip3'}
        ]
      }
    },

    methods: {
      // 提交表单
      submit() {
        // 设置id
        this.formData.id = this.id
        // 校验表单数据
        this.$refs['form'].validate((valid) => {
          // 校验通过
          if (valid) {
            // 保存
            saveApi(this.formData).then((res) => {
              if (res.success) {
                // 关闭表单
                this.closeForm()
              } else {
                // 展示错误消息
                messageUtil.error(res, this)
              }
            })
          }
        })
      },


      // 关闭表单
      closeForm() {
        // 触发 reloadTable 事件   让父组件重新加载table数据
        this.$emit('reloadTable')

        // 触发changeForm 事件    让父组件关闭 本表单
        this.$emit('changeForm')

        // 重置表单
        this.$refs['form'].resetFields()
      },

      // 查询详情
      getDetail() {
        getApi(this.id).then((res) => {
          if (res.success) {
            this.formData = res.data
          } else {
            this.$message.error(res.message);
          }
        })
      }
    },
    // 监控数据
    watch: {
      // 监控 id值的变化
      id(newval, val) {
        // 打开表单 并且 有传入id
        if (this.showFlag && newval) {
          // 查询详情
          this.getDetail()
        }
      }
    }
  }
</script>

<style scoped>

</style>
